<template>
  <div class="index-container">
    <el-row :gutter="30">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">志愿者服务时长排行榜</h3>
          </div>
          <div>
            <el-table
              ref="tableSort"
              v-loading="listLoading"
              :data="service_time"
              :element-loading-text="elementLoadingText"
              :header-row-style="{ background: 'rgba(0, 0, 0, 0)' }"
              :header-cell-style="{
                background: 'rgba(0, 0, 0, 0)',
                color: '#fff',
              }"
              header-cell-class-name="tableCell"
              row-class-name="tableRow"
              :highlight-current-row="false"
              class="tableSort"
            >
              <el-table-column
                show-overflow-tooltip
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="性别"
                prop="sex"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="年龄"
                prop="age"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="服务时长"
                prop="time"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">爱心人士捐款排行榜</h3>
          </div>
          <div>
            <el-table
              ref="tableSort"
              v-loading="listLoading"
              :data="help_money"
              :element-loading-text="elementLoadingText"
              :header-row-style="{ background: 'rgba(0, 0, 0, 0)' }"
              :header-cell-style="{
                background: 'rgba(0, 0, 0, 0)',
                color: '#fff',
              }"
              header-cell-class-name="tableCell"
              row-class-name="tableRow"
              :highlight-current-row="false"
              class="tableSort"
            >
              <el-table-column
                show-overflow-tooltip
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="性别"
                prop="sex"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="年龄"
                prop="age"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="捐款金额"
                prop="sum_num"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">爱心人士捐赠物资排行榜</h3>
          </div>
          <div>
            <el-table
              ref="tableSort"
              v-loading="listLoading"
              :data="help_goods"
              :element-loading-text="elementLoadingText"
              :header-row-style="{ background: 'rgba(0, 0, 0, 0)' }"
              :header-cell-style="{
                background: 'rgba(0, 0, 0, 0)',
                color: '#fff',
              }"
              header-cell-class-name="tableCell"
              row-class-name="tableRow"
              :highlight-current-row="false"
              class="tableSort"
            >
              <el-table-column
                show-overflow-tooltip
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="性别"
                prop="sex"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="年龄"
                prop="age"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="捐款物件"
                prop="sum_num"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <!-- <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">爱心服务内容/时长统计</h3>
          </div>
          <div>
            <el-table
              ref="tableSort"
              v-loading="listLoading"
              :data="list"
              :element-loading-text="elementLoadingText"
              :header-row-style="{ background: 'rgba(0, 0, 0, 0)' }"
              :header-cell-style="{
                background: 'rgba(0, 0, 0, 0)',
                color: '#fff',
              }"
              header-cell-class-name="tableCell"
              row-class-name="tableRow"
              :highlight-current-row="false"
              class="tableSort"
            >
              <el-table-column
                show-overflow-tooltip
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="性别"
                prop="sex"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="年龄"
                prop="age"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="服务时长"
                prop="action_time"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col> -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">已分配捐款统计</h3>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart2"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card shadow="hover">
          <div slot="header" class="title clearfix">
            <h3 class="fl">已分配物资统计</h3>
          </div>
          <div>
            <vab-chart
              autoresize
              :options="chart3"
              style="width: 100%; height: 360px"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import VabChart from "@/plugins/echarts";
  import { healthData } from "@/api/caseApi";
  import { gethelporder } from "@/api/helpManager"
  const chartData = [];
  export default {
    name: "Index",
    components: {
      VabChart,
    },
    data() {
      return {
        year1: "",
        imgShow: true,
        listLoading: false,
        elementLoadingText: "加载中...",
        service_time: [],
        help_money: [],
        help_goods: [],
        data_money: [],
        data_goods: [],
        chart2: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "金额/万元",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "金额/元",
              type: "bar",
              barWidth: 25,
              color: "#1791FF",
              backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
              },
              data: [10, 52, 200, 334, 390, 330, 220, 200, 334, 555, 366, 412],
            },
          ],
        },
        chart3: {
          grid: {
            top: "25%",
            bottom: "10%",
            left: "7%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                color: "#001e44",
              },
            },
          },
          xAxis: {
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
          yAxis: [
            {
              type: "value",
              name: "物资/件",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: true,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "物资/件",
              type: "bar",
              barWidth: 25,
              color: "#1791FF",
              backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
              },
              data: [10, 52, 200, 334, 390, 330, 220, 200, 334, 555, 366, 412],
            },
          ],
        },
        imageList: [],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      gethelporder().then(res => {
        const data = res.data;
        this.service_time = data.service_time;
        this.help_money = data.help_money;
        this.help_goods = data.help_goods;
        let data_money = [];
        let data_goods = [];
        for (const key in data.data_money) {
          if (data.data_money.hasOwnProperty(key)) {
            const element = data.data_money[key];
            data_money.push(element);
          }
        }
        for (const key in data.data_goods) {
          if (data.data_goods.hasOwnProperty(key)) {
            const element = data.data_goods[key];
            data_goods.push(element);
          }
        }
        console.log(data_goods)
        this.chart2.series[0].data = data_money.map(Number);
        this.chart3.series[0].data = data_goods.map(Number);
      })
    },
    methods: {
      result(value) {},
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    background: #001e44 !important;

    .tableSort {
      background: none;

      ::v-deep {
        .tableCell {
          .cell {
            color: #fff;
          }
        }

        .tableRow {
          color: #fff;
          background: rgba($color: #fff, $alpha: 0);

          &:hover {
            td {
              background: rgba($color: #fff, $alpha: 0);
            }
          }

          .cell {
            color: #fff;
          }
        }
      }
    }

    .el-card {
      background: none;
      background: rgba($color: #fff, $alpha: 0.1);
      border-color: #00e4ff;

      ::v-deep {
        .el-card__header {
          border-bottom: 1px solid #00e4ff;
        }
      }

      .title {
        font-size: 18px;
        color: #fff;
        cursor: pointer;

        h3 {
          font-weight: normal;
        }
      }

      .el-dropdown-link {
        font-size: 16px;
        color: #fff;
      }
    }
  }
</style>
